import request from '@/utils/request'
import echarts from 'echarts'

/**
 * 获取数据
 * @param type
 * @returns {*}
 */
export function getConsultData(type) {
  return request({
    url: '/cloud/jcce/v1.0/kt2/getConsultData',
    method: 'get',
    params: {
      mode: type
    }
  })
}

export default {
  name: 'businessScreen',
  data() {
    return {
      totalPrice: '172.29',
      shortTermExpense: [],
      recentExpense: [],
      cloudData: [],
      isLoading: false,
      dqtc: 'price'
    }
  },
  created() {
  },
  beforeDestroy() {
  },
  async mounted() {
    await this.getCharts()
    await this.getmedium()
    // this.totalPrice = (Math.abs(Math.random() * 100) + 100).toFixed(2)
    this.totalPrice = 75
    this.getCloudInfo()
  },
  methods: {
    getCloudInfo() {
      this.isLoading = true
      // 调课题4->课题2雍欣接口
      getConsultData(this.dqtc).then((data) => {
        this.cloudData = data.data
        this.isLoading = false
      }).catch((error) => {
        console.log(error)
        this.isLoading = false
      })

      // 切换推荐方案
      // 获取当前时间
      const now = new Date()
      // 创建一个数组来存储每个整点的时间
      const timeList = []
      // 循环获取当前时间之后的24个整点时间
      for (let i = 1; i <= 24; i++) {
        const nextHour = new Date(now.getTime() + i * 60 * 60 * 1000)
        // 获取整点时间的小时数并转换为字符串
        const hourString = nextHour.getHours().toString()

        // 将小时字符串添加到数组中
        timeList.push(hourString)
        // 将整点时间添加到数组中
      }

      const medium_term_chart1 = echarts.init(document.getElementById('medium_term_chart1'), 'dark')
      const medium_term_chart2 = echarts.init(document.getElementById('medium_term_chart2'), 'dark')
      const medium_term_chart3 = echarts.init(document.getElementById('medium_term_chart3'), 'dark')

      let o1 = this.getChart1(timeList);
      let o2 = this.getChart2(timeList);
      let o3 = this.getChart3(timeList);

      // 三套数据
      // price ptoc capacity
      if (this.dqtc == 'price') {
        o1.series[0].data = [72, 72, 71, 71, 70, 69, 68, 67, 67, 68, 67, 66, 66, 66, 67, 67, 68, 68, 67, 67, 66, 66, 65, 64]
        o2.series[0].data = [610, 744, 702, 948, 820, 960, 880, 644, 636, 758, 560, 920]
        o3.series[0].data = [72, 72, 71, 71, 70, 69, 68, 67, 67, 68, 67, 66, 66, 66, 67, 67, 68, 68, 67, 67, 66, 66, 65, 64]
      }
      if (this.dqtc == 'ptoc') {
        o1.series[0].data = [123, 234, 456, 234, 567, 678, 345, 456, 890, 567, 890, 789, 901, 567, 890, 678, 789, 890, 234, 123, 234, 567, 901, 890]
        o2.series[0].data = [58, 57, 55, 55, 55, 60, 65, 66, 68, 70, 72, 72]
        o3.series[0].data = [10, 20, 30, 40, 50, 45, 40, 45, 50, 55, 60, 58, 58, 57, 55, 55, 55, 60, 65, 66, 68, 70, 72, 72]
      }
      if (this.dqtc == 'capacity') {
        o1.series[0].data = [10, 20, 30, 40, 50, 45, 40, 45, 50, 55, 60, 58, 58, 57, 55, 55, 55, 60, 65, 66, 68, 70, 72, 72]
        o2.series[0].data = [72, 55, 70, 55, 66, 55, 60, 65, 58, 57, 68, 72]
        o3.series[0].data = [72, 71, 68, 66, 64, 63, 60, 57, 55, 55, 56, 58, 58, 57, 55, 50, 45, 43, 45, 45, 40, 33, 20, 13]
      }

      medium_term_chart1.setOption(o1)
      medium_term_chart2.setOption(o2)
      medium_term_chart3.setOption(o3)
    },
    getCharts() {
      this.recentExpense = this.makeData()
      this.shortTermExpense = this.makeData()
      const short_term_chart = echarts.init(document.getElementById('short_term_chart'), 'dark')
      this.chartShortOption = {
        tooltip: {
          trigger: 'axis'
        },
        title: {
          left: 'center',
          text: ''
        },
        backgroundColor: 'transparent',
        xAxis: {
          type: 'time',
          boundaryGap: false
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, '100%']
        },
        // dataZoom: [{ type: 'inside', start: 46, end: 54 }, { type: 'inside', start: 46, end: 54 }],
        series: [
          {
            name: '当前费用(元)',
            type: 'line',
            smooth: true,
            symbol: 'none',
            // data: this.recentExpense,
            data: this.getDateAndData([10, 13, 14, 10, 13, 15, 12]),
            itemStyle: {
              color: '#6495ED'
            }
          }, {
            name: '短期套餐费用(元)',
            type: 'line',
            smooth: true,
            symbol: 'none',
            // data: this.shortTermExpense,
            data: this.getDateAndData([8, 10, 11, 11, 13, 12, 10]),
            itemStyle: {
              color: '#f5b000'
            }
          }
        ]
      }

      short_term_chart.setOption(this.chartShortOption)
    },
    getmedium() {
      // 获取当前时间
      const now = new Date()
      // 创建一个数组来存储每个整点的时间
      const timeList = []
      // 循环获取当前时间之后的24个整点时间
      for (let i = 1; i <= 24; i++) {
        const nextHour = new Date(now.getTime() + i * 60 * 60 * 1000)
        // 获取整点时间的小时数并转换为字符串
        const hourString = nextHour.getHours().toString()

        // 将小时字符串添加到数组中
        timeList.push(hourString)
        // 将整点时间添加到数组中
      }
      const medium_term_chart = echarts.init(document.getElementById('medium_term_chart'), 'dark')

      // 后增加
      const medium_term_chart1 = echarts.init(document.getElementById('medium_term_chart1'), 'dark')
      const medium_term_chart2 = echarts.init(document.getElementById('medium_term_chart2'), 'dark')
      const medium_term_chart3 = echarts.init(document.getElementById('medium_term_chart3'), 'dark')

      const option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['内存', 'gpu', 'cpu']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        backgroundColor: 'transparent',
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: timeList
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '内存',
            type: 'line',
            data: [610, 744, 702, 948, 820, 960, 880, 644, 636, 758, 560, 920, 952, 665, 686, 858, 760, 860, 1100, 604, 582, 878, 662, 811]
          },
          {
            name: 'gpu',
            type: 'line',
            data: [80, 80, 105, 125, 136, 86, 79, 67, 83, 126, 120, 101, 65, 87, 95, 95, 110, 107, 78, 104, 107, 69, 108, 72]
          },
          {
            name: 'cpu',
            type: 'line',
            data: [19, 22, 28, 37, 16, 23, 36, 36, 22, 33, 13, 26, 27, 37, 13, 14, 23, 25, 27, 16, 21, 14, 18, 34]
          }
        ]
      }
      medium_term_chart.setOption(option)

      medium_term_chart1.setOption(this.getChart1(timeList))
      medium_term_chart2.setOption(this.getChart2(timeList))
      medium_term_chart3.setOption(this.getChart3(timeList))
    },
    getChart1(timeList) {
      return {
        tooltip: {
          trigger: 'axis',
          formatter: '{a}：{c}ms'
        }, legend: {
          data: ['延迟']
        }, grid: {
          left: '3%', right: '14%', bottom: '3%', top: '35%', containLabel: true
        }, toolbox: {
          feature: {
            saveAsImage: {}
          },
        }, backgroundColor: 'transparent',
        xAxis: {
          name: '时间(时)',
          type: 'category', boundaryGap: false, data: timeList
        }, yAxis: {
          name: '时延(ms)',
          type: 'value'
        }, series: [{
          name: '延迟',
          type: 'line',
          data: [123, 456, 789, 234, 567, 890, 345, 678, 901, 234, 567, 890, 123, 456, 789, 234, 567, 890, 345, 678, 901, 234, 567, 890],
          itemStyle: {
            color: '#FF0000' // 设置颜色为红色
          }
        }]
      }
      return option;
    },
    getChart2(timeList) {
      return {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['成本']
        }, grid: {
          left: '3%', right: '14%', bottom: '3%', top: '35%', containLabel: true
        }, toolbox: {
          feature: {
            saveAsImage: {}
          }
        }, backgroundColor: 'transparent', xAxis: {
          boundaryGap: true, // 设置为 true
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        }, yAxis: {
          name: '成本(元/万元)', type: 'value'
        }, series: [{
          name: '成本', type: 'bar', data: [610, 744, 702, 948, 820, 960, 880, 644, 636, 758, 560, 920],
          itemStyle: {
            color: '#6495ED'
          }
        }, {
          name: '短期套餐费用(元)',
          type: 'line',
          smooth: true,
          symbol: 'none',
          // data: this.shortTermExpense,
          data: this.getDateAndData([8, 10, 11, 11, 13, 12, 10]),
          itemStyle: {
            color: '#f5b000'
          }
        }]
      };
    },
    getChart3(timeList) {
      return {
        tooltip: {
          trigger: 'axis',
          formatter: '{a}：{c}ms'
        }, legend: {
          data: ['能耗']
        }, grid: {
          left: '3%', right: '14%', bottom: '3%', top: '35%', containLabel: true
        }, toolbox: {
          feature: {
            saveAsImage: {}
          },
        }, backgroundColor: 'transparent',
        xAxis: {
          name: '时间(时)',
          type: 'category', boundaryGap: false, data: timeList
        }, yAxis: {
          name: '能耗(w)',
          type: 'value'
        }, series: [{
          name: '能耗',
          type: 'line',
          data: [523, 847, 192, 678, 345, 910, 234, 789, 456, 123, 567, 890, 432, 876, 321, 654, 987, 210, 543, 876, 345, 678, 901, 234],
          itemStyle: {
            color: '#f5b000'
          }
        }]
      }
    },
    makeData() {
      const base = +new Date()
      const oneDay = 24 * 3600 * 1000
      // const data = [[base, Math.random() * 300]]
      const data = []
      for (let i = -49; i < 50; i++) {
        const now = new Date((base + i * oneDay))
        data.push([+now, Math.abs(Math.random() * 300).toFixed(2)])
      }
      return data
    },
    getDateAndData(arr) {
      let begin = Date.parse(new Date())
      let result = []
      for (let i = 0; i < arr.length; i++) {
        result.push([(begin + i * 1000 * 3600 * 24), arr[i]])
      }
      return result
    }
  }

}
